<template>
  <div class="home-page">
    <v-header></v-header>

    <ul class="nav">
      <li v-for="(item, index) in arrList" :key="index">
        <img :src="item.imgUrl" alt />
        <span>{{item.name}}</span>
      </li>
    </ul>

		<v-course :arrList='courseList'></v-course>

		<v-footer></v-footer>
  </div>
</template>

<script>
/* 引入组件 */
import Header from "@/components/header/";
import Course from '@/components/course/';
import Footer from '@/components/footer'
/* 图片 */
import web from "@/assets/web.png";
import webservice from "@/assets/webservice.png";
import move from "@/assets/move.png";
import data from "@/assets/data.png";
import bigdata from "@/assets/bigdata.png";


import course1 from '@/assets/course1.jpg';
import course2 from '@/assets/course2.jpg';
import course3 from '@/assets/course3.jpg';
import course4 from '@/assets/course4.jpg';
import course5 from '@/assets/course5.jpg';
export default {
  data() {
    return {
			arrList: [],
			courseList: [],
    };
	},
	/* 注册组件 */
  components: {
		"v-header": Header,
		"v-course": Course,
		"v-footer": Footer,
  },
  mounted() {
		this.arrList = [
			 {
          imgUrl: web,
          name: "前端开发"
        },
        {
          imgUrl: webservice,
          name: "后端开发"
        },
        {
          imgUrl: move,
          name: "移动开发"
        },
        {
          imgUrl: data,
          name: "数据库"
        },
        {
          imgUrl: bigdata,
          name: "云计算"
        }
		],

		this.courseList = [
			{
				imgUrl: course1,
				title: '实例妙解Sed和Awk的秘密',
				description: '中级 · 330人在学',
			},
			{
				imgUrl: course2,
				title: '实例妙解Sed和Awk的秘密',
				description: '中级 · 330人在学',
			},
			{
				imgUrl: course3,
				title: '实例妙解Sed和Awk的秘密',
				description: '中级 · 330人在学',
			},
			{
				imgUrl: course4,
				title: '实例妙解Sed和Awk的秘密',
				description: '中级 · 330人在学',
			},
			{
				imgUrl: course5,
				title: '实例妙解Sed和Awk的秘密',
				description: '中级 · 330人在学',
			},
			{
				imgUrl: course5,
				title: '实例妙解Sed和Awk的秘密',
				description: '中级 · 330人在学',
			},
			{
				imgUrl: course5,
				title: '实例妙解Sed和Awk的秘密',
				description: '中级 · 330人在学',
			},
		]
	}
};
</script>

<style scoped>
.home-page .nav {
  margin-top: 44px;
  height: 100px;
  white-space: nowrap;
  overflow-x: scroll;
  background: #f3f5f7;
  font-size: 0;
}
.nav li {
  width: 88px;
  display: inline-block;
  color: #2b333b;
  font-size: 14px;
  text-align: center;
}
.nav li img {
  display: block;
  width: 32px;
  margin: 20px auto 12px;
}
</style>